<template>
  <div class="  ">
    <el-dialog
      v-model="addEditInfo.openObj.visible"
      width="800px"
      append-to-body
      :close-on-click-modal="false"
    >
      <template #header>
        <div class="dialog_title">
          <div class="blueLine"></div>
          <div class="title">
            <span v-html="addEditInfo.openObj.openTitle"></span>
            <el-tag
              v-if="addEditInfo.openObj.openKey == 'detail'"
              :type="
                addEditInfo.formInfo.flowStatus == 2
                  ? 'success'
                  : addEditInfo.formInfo.flowStatus == 0 ||
                    addEditInfo.formInfo.flowStatus == 1
                  ? 'warning'
                  : 'danger'
              "
            >
              <span v-if="addEditInfo.openObj.openType == 'myApplication'">
                {{
                  filterStatus(
                    addEditInfo.formInfo.flowStatus,
                    "myAplicationStatus",
                    "id",
                    "langKey"
                  )
                }}
              </span>
              <span v-else>
                {{
                  filterStatus(
                    addEditInfo.formInfo.flowStatus,
                    "approvalStatusByMyself",
                    "id",
                    "langKey"
                  )
                }}
              </span>
            </el-tag>
          </div>
        </div>
      </template>
      <div class="flex_title">
        <div class="left_title">
          <span>
            {{ addEditInfo.openObj.tableTitle }}
          </span>

          （{{ addEditInfo.tableData.length }}）
        </div>
      </div>
      <div class="table_area">
        <el-table
          ref="assetsTableRef"
          style="width: 100%"
          height="400"
          v-loading="loadingApproval"
          :data="addEditInfo.tableData"
          :header-cell-style="{ textAlign: 'center' }"
          :cell-style="{ textAlign: 'center' }"
        >
          <template v-for="(item, index) in columns" :key="item.key">
            <el-table-column
              v-if="item.visible"
              :prop="item.prop"
               :label="t(`tableColumns.${item.langKey}`)"
              :width="item.width"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row }">
                <div
                  v-if="item.prop == 'assetsCode'"
                  :style="{
                    color: colors.primaryColor,
                    cursor: item.isclick ? 'pointer' : '',
                  }"
                  @click.native.stop="openAssetsDetail(row)"
                >
                  {{ row.assetsCode }}
                </div>
                <el-tag
                  v-if="item.prop == 'enableFlag'"
                  :type="
                    row.enableFlag == 0
                      ? 'success'
                      : row.enableFlag == 1 || row.enableFlag == 3 || row.enableFlag == 4
                      ? 'warning'
                      : 'danger'
                  "
                >
                  {{ row.enableFlagName }}
               
                </el-tag>
              </template>
            </el-table-column>
          </template>
        </el-table>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <template v-if="addEditInfo.openObj.openKey != 'detail'">
            <el-button
              type="success"
              @click="openReject('pass')"
              :loading="addEditInfo.openObj.addLoading"
              >{{ t("button.approve") }}</el-button
            >
            <el-button type="danger" @click="openReject('revoke')">{{
              t("button.reject")
            }}</el-button>
            <el-dialog
              v-model="openApprovalObj.visible"
              width="500"
              append-to-body
              :close-on-click-modal="false"
            >
              <template #header>
                <div class="dialog_title">
                  <div class="blueLine"></div>
                  <div class="title">{{ openApprovalObj.title }}</div>
                </div>
              </template>
              <div>
                <el-form
                  ref="rejectFormRef"
                  :model="rejectForm"
                  label-width="80px"
                  :rules="openApprovalObj.key == 'pass' ? {} : rejectRules"
                >
                  <el-form-item :label="openApprovalObj.lable" prop="rejectReason">
                    <el-input
                      v-model="rejectForm.rejectReason"
                      :placeholder="`${t('common.pleaseInput')}${openApprovalObj.lable}`"
                    ></el-input
                  ></el-form-item>
                </el-form>
              </div>
              <template #footer>
                <div class="dialog-footer">
                  <el-button
                    type="primary"
                    v-if="openApprovalObj.key == 'pass'"
                    @click="pass"
                    >{{ t("common.confirm") }}</el-button
                  >

                  <el-button type="primary" v-else @click="reject"
                    >{{ t("common.confirm") }}
                  </el-button>

                  <el-button @click="closeReject">{{ t("common.close") }}</el-button>
                </div>
              </template>
            </el-dialog>
          </template>
          <template v-else>
            <el-button @click="cancel">{{ t("common.close") }}</el-button>
          </template>
        </div>
      </template>
    </el-dialog>

    <detail
      v-if="assetsDetailInfo.openObj.visible"
      :asset-detail-info="assetsDetailInfo"
    ></detail>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { Delete } from "@element-plus/icons-vue";
import colors from "@/assets/styles/variables.module.scss";
import detail from "@/components/AshDialog/detail.vue"; //资产详情

import { assetsColums } from "@/utils/table/columns";
const { proxy } = getCurrentInstance();
const emit = defineEmits(["cancel", "submitApproval"]);

const props = defineProps({
  addEditInfo: {
    type: Object,
    default: true,
  },
  loadingApproval: {
    type: Boolean,
    default: true,
  },
});

const columns = assetsColums;
const addEditInfoRef = ref(null); //表单dom，用于refs和reset
const assetsTableRef = ref(null); //表格选择dom
const rejectForm = reactive({ rejectReason: "" }); //驳回原因
const openApprovalObj = reactive({
  visible: false,
  title: "",
  key: "",
  lable: "",
});
const rejectRules = reactive({
  rejectReason: [
    {
      required: true,
      message: t("message.rejectReasonRuleTip"),
      trigger: "blur",
    },
  ],
});
const submitApproval = (key) => {
  const info = { ...props.addEditInfo.formInfo, ...rejectForm };
  emit("submitApproval", key, info);
};

const openReject = (key) => {
  openApprovalObj.title =
    key == "pass" ? t("common.documentApproved") : t("common.documentRejected");
  openApprovalObj.key = key;
  openApprovalObj.lable =
    key == "pass" ? t("common.approveComment") : t("common.rejecReason");
  openApprovalObj.visible = true;
};

const closeReject = () => {
  rejectForm.rejectReason = "";
  proxy.$refs.rejectFormRef.resetFields();
  openApprovalObj.visible = false;
};

const reject = () => {
  proxy.$refs.rejectFormRef.validate((valid) => {
    if (!valid) return;
    submitApproval("revoke");
  });
};
//确定提交
const pass = () => {
  submitApproval("pass");
};
//取消提交
const cancel = () => {
  if (proxy.addEditInfo.tableData.length > 0) {
    //如果有数据需要清空
    proxy.addEditInfo.tableData = [];
  }
  emit("cancel");
};

//3查看资产详情
const assetsDetailInfo = reactive({
  openObj: {
    visible: false,
    openTitle: "",
  },
  form: {},
});
const openAssetsDetail = (row) => {
  assetsDetailInfo.openObj = {
    visible: true,
    openTitle: t("assetsList.assetsList"),
  };
  assetsDetailInfo.form = row;
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.dialog_title {
  display: flex;
  font-weight: 700;
  align-items: center;

  .blueLine {
    color: #1065ff;
    background: #1065ff;
    width: 5px;
    height: 20px;
    border-radius: 3px;
    margin-right: 10px;
    max-height: 24px;
  }
  .title {
    color: #000;
  }
}
.flex_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .left_title {
    color: $--color-primary;
    font-weight: bold;
  }
}
</style>
